<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <meta name="format-detection" content="telephone=no" />
        <title>添加地址</title>
        <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
        <link rel="stylesheet" type="text/css" href="../../css/common.css" />
        <link type="text/css"  href="../../css/mui.picker.css" rel="stylesheet" />
        <link  type="text/css" href="../../css/mui.poppicker.css" rel="stylesheet" />
        <!-- <link rel="stylesheet" type="text/css" href="../../css/style.css" /> -->
        <style>
            body{
                font-size: 14px;
            }
            footer.aui-nav{
                z-index: 99999;
            }
            header.aui-bar{
                background: #fff;
            }
            .aui-title{
                color:#000;
            }
            .aui-nav .aui-bar-tab .active .aui-iconfont, .aui-nav .aui-bar-tab .active p{
                color:#ff3333 !important;
            }
            .active{
                color:#ff3333 !important;
            }
            .aui-tab-nav li.active {
                color: #ff3333;
                border-bottom: 2px #ff3333 solid;
            }
            .aui-bar .aui-iconfont{
                color:#000;
            }
            .send{
                font-size: 12px !important;
            }
            .aui-list-view:after{
                border:none;
            }
            .aui-switch.aui-switch-success:checked {
                border-color: #ff3333;
                box-shadow: #ff3333 0 0 0 26px inset;
                background-color: #ff3333;
            }
            .menuRgiht{
                float: right;
                margin-right: 20px;
            }
            input[type="text"]{
                border:none;
                margin: 0;
                width: 70%;
                padding: 0;
            }
            textarea{
                margin: 0;
                height: 80px;
                overflow-y: auto;
                border:none;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <header class="aui-bar aui-bar-nav aui-border-b">
            <div class="aui-pull-left aui-iconfont aui-icon-left icon-left-coler" tapmode onclick="closeWin()"></div>
            <div class="aui-title">
                添加地址
            </div>
            <div class="aui-pull-right aui-iconfont send">保存</div>
        </header>
        <div class="contain">            
            <ul class="aui-list-view">
                <li class="aui-list-view-cell">
                    收货人:
                    <span><input type="text" name="" placeholder="请输入收货人姓名"></span>
                </li>
                <li class="aui-list-view-cell">
                    联系电话:
                    <span><input type="phone" onblur="checkPhone(this)" name="" placeholder="请输入收货人电话"></span>
                </li>
                <li class="aui-list-view-cell" id="showCityPicker3">
                    <a class="aui-arrow-right">
                        所在地区
                        <span class="menuRgiht" id="checkCity">请选择</span>
                    </a>
                </li>
                
               <!--  <li class="aui-list-view-cell" tapmode onclick="openToTwo('releaseCategory_win')">
                    <a class="aui-arrow-right">
                        街道
                        <span class="menuRgiht">请选择</span>
                    </a>
                </li> -->
                <li class="aui-list-view-cell">
                    <textarea class="problemText"  onblur="checkWord(this)"   placeholder="请写详细地址，不少于5个字"></textarea>
                </li>
            </ul>            
            <ul class="aui-list-view">
                <li class="aui-list-view-cell aui-switch-body">
                    <div class="aui-switch-title">设为默认</div>
                    <input type="checkbox" class="aui-switch aui-switch-success aui-pull-right" checked>
                </li>
            </ul>
        </div>
        
    </body>
    <script type="text/javascript" src="../../script/api.js"></script>
    <script type="text/javascript" src="../../script/common.js"></script>
    <script type="text/javascript" src="../../script/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="../../script/city.data-3.js"></script>
    <script type="text/javascript" src="../../script/mui.js"></script>
    <script type="text/javascript" src="../../script/mui.picker.js"></script>
    <script  type="text/javascript" src="../../script/mui.poppicker.js"></script>
    <script type="text/javascript">
        apiready = function() {
            api.parseTapmode();
            var mobile = api.pageParam.mobile;
            var header = $api.dom('header');
            //$api.fixStatusBar(header);
            api.setStatusBarStyle({
                  style : 'light'
            });
            
        }
        // 验证输入的地址是不是为空或者大于5
        function checkWord(obj){
            var len=$(obj).val().length;
            var value=$(obj).val();
            if(len>0){
               if(len<5){
                   api.toast({
                       msg:"字数少于5个字"
                   })
               }
           }else{
               api.toast({
                   msg:"不能为空"
               })
           }
        }
        // 验证手机号或者电话号码
        function checkPhone(obj){
            var pattern=/(^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$)|(^0{0,1}1[3|4|5|6|7|8|9][0-9]{9}$)/;
            if(!pattern.test($(obj).val())) { 
                api.toast({
                    msg:"请输入正确号码"
                }) 
            }
        }

        (function($, doc) {
            $.init();
            $.ready(function() {
                var cityPicker3 = new $.PopPicker({
                    layer: 3
                });
                cityPicker3.setData(cityData3);
                var showCityPickerButton = doc.getElementById('showCityPicker3');
                showCityPickerButton.addEventListener('tap', function(event) {
                    // mask.show();
                    showCityPickerButton.focus();
                    cityPicker3.show(function(items) {
                        var city = (items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text;
                        // 保存城市代码，修改时候设置默认值
                        var cityCode=items[0]["value"]+'='+items[1]["value"]+'='+items[2]["value"];
                        // alert(cityCode)
                        doc.getElementById('checkCity').innerText=city;
                        //返回 false 可以阻止选择框的关闭
                        //return false;
                    });
                }, false);
            });
        })(mui, document);
    </script>
</html>
